<template>
    <el-row :gutter="16">
        <el-col :span="5">
            <div class="flex flex-col justify-between data content-container">
                <div class="flex items-center">
                    <mark>询盘总量</mark>
                    <p>5204</p>
                </div>
                <div class="flex items-center flex-wrap">
                    兴旺通<b>1205</b>留言<b>242</b>电话<b>179</b>
                </div>
            </div>
        </el-col>
        <el-col :span="5">
            <div class="flex flex-col justify-between data content-container">
                <div class="flex items-center">
                    <mark>访问量</mark>
                    <p>5204</p>
                </div>
                <div class="flex items-center">
                    最近30天访问量<b>1205</b>
                </div>
            </div>
        </el-col>
        <el-col :span="5">
            <div class="flex flex-col justify-between data content-container">
                <div class="flex items-center">
                    <mark>关键词数量</mark>
                    <p>5204</p>
                </div>
                <div class="flex items-center flex-wrap">
                    百度<b>1205</b>搜狗<b>242</b>必应<b>179</b>360<b>179</b>
                </div>
            </div>
        </el-col>
        <el-col :span="5">
            <div class="flex flex-col justify-between data content-container">
                <div class="flex items-center">
                    <mark>产品数</mark>
                    <p>5204</p>
                </div>
                <div class="flex items-center">
                    最近30天发布数<b>1205</b>
                </div>
            </div>
        </el-col>
        <el-col :span="5">
            <div class="flex flex-col justify-between data content-container">
                <div class="flex items-center">
                    <mark>文章数</mark>
                    <p>5204</p>
                </div>
                <div class="flex items-center">
                    最近30天发布数<b>1205</b>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.el-col-5 {
    max-width: 20%;
    flex: 0 0 20%;
}
.data{
    height: 112px;
    padding:24px 16px;
    div{
        color: #999999;
        font-size: 12px;
        mark{
            font-size: 12px;
            font-weight: bold;
            line-height: 28px;
            padding: 0 8px;
            color: var(--mainColor);
            background: var(--mainBg);
            display: flex;
            margin-right: 16px;
        }
        p{
            font-size: 24px;
            font-weight: bold;
            color: #e35151;
            font-family: 'DIN web';
        }
        b{
            font-size: 20px;
            font-weight: bold;
            color: var(--title-color);
            font-family: 'DIN web';
            margin-right: 16px;
            margin-left: 5px;
        }
    }
}
</style>